<template>
    <div id="loginForm">
        <div class="login">
            <h3>系统登录</h3>
            <el-form style="margin-right:35px;" :label-position="labelPosition" ref="ruleForm" label-width="80px" :model="formLabelAlign">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formLabelAlign.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formLabelAlign.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code" style="margin-bottom:0;">
                    <el-row :gutter="10"> 
                        <el-col :span="14">
                            <el-input v-model="formLabelAlign.code"></el-input>
                        </el-col>
                        <el-col :span="10"><el-image :fit="cover" @click="getKaptch" style="height:40px;" :src="captchaUrl" /></el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="margin-bottom:0;">
                    <el-checkbox label="记住我" v-model="memberMe" name="type"></el-checkbox>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script>
import {defineComponent, ref, reactive, watch, onMounted  } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { getRequest } from '../../utils/api.js';
export default defineComponent({
    name:"Login",


    setup(props,context){

        const labelPosition = ref("right");
        const captchaUrl = ref("");
        const memberMe = ref(true);
        const formLabelAlign = reactive({
            username: 'wxm123',
            password: '123123',
            code: '',
            checked:1
        });

        const router = useRouter();

        const submitForm = (data)=>{
            console.log(formLabelAlign);
            router.replace('/home');
        };

        const getKaptch = ()=>{
            let url = '/admin/kaptcha.jpg?t='+new Date().getTime();
            getRequest(url).then(res=>{
                captchaUrl.value = url;
            })
        }

        watch(memberMe,(nval,oval)=>{
            nval ? formLabelAlign.checked = 1 : formLabelAlign.checked = 0;
        });

        onMounted(()=>{
            getKaptch();
        })


        return{
            labelPosition,
            memberMe,
            captchaUrl,
            formLabelAlign,
            router,
            submitForm,
            getKaptch
        }
    }

})
</script>

<style>
    #loginForm{
        display: flex;
        width:100%;
        height:80%;
        position: absolute;
        top:0px;
        left:0px;
        justify-content:center;
        align-items:center;
    }

    .login{
        width:30%;
        border-radius:15px;
        background:#fff;
        border:1px solid #eaeaea;
        box-shadow:0 0 25px #cac6c6;
    }

    .login h3{
        text-align:center;
    }
</style>
